<template>
  <div class="demo-avatar">
    <div class="demo-avatar-block">
      <t-avatar size='small'>W</t-avatar>
      <t-avatar size='medium'>W</t-avatar>
      <t-avatar size='large'>W</t-avatar>
      <t-avatar size='100px'>W</t-avatar>
    </div>
    <div class="demo-avatar-block">
      <t-avatar shape="round" size='small'>W</t-avatar>
      <t-avatar shape="round" size='medium'>W</t-avatar>
      <t-avatar shape="round" size='large'>W</t-avatar>
      <t-avatar shape="round" size='100px'>W</t-avatar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
};
</script>
<style lang="less" scoped>
  .demo-avatar{
    .demo-avatar-block:first-child{
      margin-bottom: 40px;
    }
    .t-avatar {
      margin-right: 40px;
    }
  }
</style>
